<!-- 编辑弹窗 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :lock-scroll="true"
    :title="isUpdate ? '修改菜单' : '添加菜单'"
    :visible="visible"
    custom-class="ele-dialog-form"
    width="800px"
    @update:visible="updateVisible"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="92px"
      @keyup.enter.native="save"
      @submit.native.prevent
    >
      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="上级菜单:">
            <ele-tree-select
              v-model="form.parentId"
              :data="menuList"
              clearable
              default-expand-all
              label-key="title"
              placeholder="请选择上级菜单"
              value-key="menuId"
            />
          </el-form-item>
          <el-form-item label="菜单名称:" prop="title">
            <el-input
              v-model="form.title"
              clearable
              placeholder="请输入菜单名称"
            />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="菜单类型:">
            <el-radio-group v-model="form.menuType" @change="onMenuTypeChange">
              <el-radio :label="0">菜单</el-radio>
              <el-radio :label="1">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="打开方式:">
            <el-radio-group
              v-model="form.openType"
              :disabled="form.menuType === 1"
              @change="onOpenTypeChange"
            >
              <el-radio :label="0">组件</el-radio>
              <el-radio :label="1">内链</el-radio>
              <el-radio :label="2">外链</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="菜单级别:">
            <el-radio-group v-model="form.menuLevel">
              <el-radio :label="0">用户</el-radio>
              <el-radio :label="1">系统</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <div style="margin: 6px 0 28px 0">
        <el-divider/>
      </div>
      <el-row :gutter="15">
        <el-col :sm="12">
          <el-form-item label="菜单图标:">
            <ele-icon-picker
              v-model="form.icon"
              :disabled="form.menuType === 1"
              placeholder="请选择菜单图标"
            />
          </el-form-item>
          <el-form-item name="path">
            <template slot="label">
              <el-tooltip
                v-if="form.openType === 2"
                content="需要以`http://`、`https://`、`//`开头"
                placement="top"
              >
                <i class="el-icon-_question"></i>
              </el-tooltip>
              <span>{{
                  form.openType === 2 ? " 外链地址:" : " 路由地址:"
                }}</span>
            </template>
            <el-input
              v-model="form.path"
              :disabled="form.menuType === 1"
              :placeholder="
                form.openType === 2 ? '请输入外链地址' : '请输入路由地址'
              "
              clearable
            />
          </el-form-item>
          <el-form-item name="component">
            <template slot="label">
              <el-tooltip
                v-if="form.openType === 1"
                content="需要以`http://`、`https://`、`//`开头"
                placement="top"
              >
                <i class="el-icon-_question"></i>
              </el-tooltip>
              <span>{{
                  form.openType === 1 ? " 内链地址:" : " 组件路径:"
                }}</span>
            </template>
            <el-input
              v-model="form.component"
              :disabled="form.menuType === 1 || form.openType === 2"
              :placeholder="
                form.openType === 1 ? '请输入内链地址' : '请输入组件路径'
              "
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="权限标识:">
            <el-input
              v-model="form.authority"
              :disabled="form.menuType === 0"
              clearable
              placeholder="请输入权限标识"
            />
          </el-form-item>
          <el-form-item label="排序号:" prop="sortNumber">
            <el-input-number
              v-model="form.sortNumber"
              :min="0"
              class="ele-fluid ele-text-left"
              controls-position="right"
              placeholder="请输入排序号"
            />
          </el-form-item>
          <el-form-item label="是否可见:">
            <el-switch v-model="form.isShow" :disabled="form.menuType === 1"/>
            <el-tooltip
              content="选择不可见只注册路由不显示在侧边栏，比如添加页面应该选择不可见"
              placement="top"
            >
              <i
                class="el-icon-_question"
                style="vertical-align: middle; margin-left: 8px"
              ></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button :loading="loading" type="primary" @click="save"
      >确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import EleIconPicker from "@/panel/ele-icon-picker";

export default {
  name: "MenuEdit",
  components: {EleIconPicker},
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
    // 全部菜单数据
    menuList: Array,
    // 上级菜单id
    parentId: Number,
  },
  data() {
    return {
      // 表单数据
      form: this.initFormData(this.data),
      // 表单验证规则
      rules: {
        title: [{required: true, message: "请输入菜单名称", trigger: "blur"}],
        sortNumber: [
          {required: true, message: "请输入排序号", trigger: "blur"},
        ],
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
    };
  },
  watch: {
    data() {
      this.isUpdate = !!(this.data && this.data.menuId);
      this.form = this.initFormData(this.data);
    },
  },
  methods: {
    /* 确定编辑 */
    save() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$http[this.isUpdate ? "put" : "post"](
            "/sys/menu",
            Object.assign({}, this.form, {
              parentId: this.form.parentId || 0,
              hide: this.form.isShow ? 0 : 1,
            })
          )
            .then((res) => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
    /* menuType选择改变 */
    onMenuTypeChange() {
      if (this.form.menuType === 0) {
        this.form.authority = null;
      } else {
        this.form.openType = 0;
        this.form.icon = null;
        this.form.path = null;
        this.form.component = null;
        this.form.hide = 0;
        this.form.isShow = true;
      }
    },
    /* openType选择改变 */
    onOpenTypeChange() {
      if (this.form.openType === 2) {
        this.form.component = null;
      }
    },
    /* 初始化form数据 */
    initFormData(data) {
      let form = {
        parentId: '',
        title: null,
        path: null,
        component: null,
        authority: null,
        sortNumber: null,
        icon: null,
        menuType: 0,
        menuLevel: 0,
        openType: 0,
        hide: 0,
        isShow: true,
      };
      if (data) {
        let openType = 0;
        if (this.isUrl(data.path)) {
          openType = 2;
        } else if (this.isUrl(data.component)) {
          openType = 1;
        }
        Object.assign(form, data, {
          parentId: this.data.parentId === 0 ? '' : this.data.parentId ?? '',
          isShow: data.hide === 0,
          openType: openType,
        });
      }
      return form;
    },
    /* 判断是否是网址 */
    isUrl(url) {
      return (
        url &&
        (url.startsWith("http://") ||
          url.startsWith("https://") ||
          url.startsWith("://"))
      );
    },
  },
};
</script>

<style scoped>
</style>
